<template>
	<v-chart :option="chartOptions" autoresize style="height: 400rpx" />
</template>

<script setup>
	import {
		ref,
		onBeforeUpdate,
	} from "vue";

	const props = defineProps({
		data: Object
	})

	const chartOptions = ref({
		tooltip: {
			trigger: 'item',
			formatter: '{b}: {c} ({d}%)',
		},
		legend: {
			orient: 'vertical',
			right: 10,
			top: 'center',
		},
		series: [{
			type: 'pie',
			radius: ['0%', '70%'],
			center: ['35%', '50%'],
			avoidLabelOverlap: false,
			label: {
				show: false,
				position: 'center',
			},
			emphasis: {
				label: {
					show: true,
					fontSize: 20,
					fontWeight: 'bold',
				},
			},
			label: {
				show: true,
				position: 'outside', // 👈 关键设置：标签在外部
				formatter: '{c}' // 显示名称
			},
			labelLine: {
				show: true,
				length: 15, // 第一段长度
				length2: 10 // 第二段长度
			},
			data: [],
		}, ],
	});

	const initChart = () => {
		chartOptions.value.series[0].data = props.data;
	}

	onBeforeUpdate(() => {
		initChart();
	});
</script>

<style>
</style>